<template>
  <div class="qqlogin">
    <Spin v-if="loading" fix>
      <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
      <div>正在同步中……</div>
    </Spin>
    <Result v-else :type="type" :title="title">
      <template #desc>
        {{ desc }}
      </template>
      <template #actions>
        <Button v-if="type == 'error'" type="primary" @click="router.replace('/user')">返回个人中心</Button>
      </template>
    </Result>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {qqBing} from "@/api/user";
import {Message, Spin} from "view-ui-plus"
import {useStore} from "vuex";
import {useRouter} from "vue-router";

declare const QC;

const store = useStore();
const router = useRouter();

let loading = ref(false);
let type = ref("");
let title = ref("");
let desc = ref("");

const qqInit = () => {
  QC.Login.getMe((openid, access_token) => {
    // 同步QQ的信息
    console.log(openid, access_token, 'openid, access_token')
    qqBing({
      openid,
      access_token
    }).then((result: any) => {
      console.log(result, 'QQ注册与登录')
      desc.value = result.data;
      if (result.code == 200) {
        type.value = "success"
        title.value = "操作成功"
        Message.success(result.data)
        // store.dispatch('UpdateLoginStatus', {
        //   Token: result.data.token,
        //   UserData: result.data.userInfo
        // })
        setTimeout(() => {
          router.replace('/user');
        }, 2000)
      } else {
        type.value = "error"
        title.value = "操作失败"
        Message.error(result.data)
      }
    })
  })
}

onMounted(() => {
  qqInit()
})
</script>

<style>
.qqlogin {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>
